<template>
  <div class="hore-list">
    <router-link tag="button" to="/hore/add" class="btn btn-primary">添加英雄</router-link>
    <hr />
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in horeList" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.horeName}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.time|formatTime}}</td>
          <td>
            <button @click="$router.push('/hore/edit/'+item.id)" class="btn btn-success" style="margin-right:10px">编辑</button>
            <button @click="delHore(item.id)" class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr v-if="horeList.length===0">
          <td colspan="5" style="text-align:center">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
// 引入axios
// import axios from 'axios'
// 导入moment
import moment from 'moment'
export default {
  // 组件初始化的时候执行
  created () {
    // 获取后台数据
    this.getHoreList()
  },
  // 过滤器
  filters: {
    formatTime (time) {
      // time 使用该过滤器的管道符前js表达式执行的结果
      return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data () {
    return {
      horeList: []
    }
  },
  methods: {
    getHoreList () {
      // 1. 发获取英雄列表的请求
      // 2. 获取数据后给 horeList 赋值即可
      this.$http.get('/hore').then(res=>{
        // res.data 就是后台返回的英雄列表数据
        this.horeList = res.data
      })
    },
    // 删除函数
    delHore (id) {
      if (confirm('老铁，您是否删除该英雄？')) {
        // 删除请求
        this.$http.delete(`/hore/${id}`).then(()=>{
          // 删除成功后更新列表
          this.getHoreList()
        })
      }
    }
  }
}
</script>